<template>
  <div class="mall-container">
    <div class="header">
      <van-nav-bar title="商城" @click-right="$router.push('/search')">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>

    <div class="sidebar-tabs">
      <div class="sidebar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="item in oneLevelCateList" :key="item.id" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="tabs">
        <div class="mall-bg">
          <img src="@/assets/mall-bg.jpg" alt="" />
        </div>
        <van-tabs v-model="active" ref="tabs" @change="tabChangeHandler" lazy-render>
          <van-empty description="该分类暂无子分类和商品数据~" v-if="twoLevelCateList.length === 0" />
          <van-tab v-for="cate in twoLevelCateList" :title="cate.name" :key="cate.id" v-else>
            <van-empty description="暂无商品数据噢~" v-if="goodsList.length === 0" />
            <van-list offset="0" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-else>
              <ul class="goods-list">
                <li class="goods-item" v-for="item in goodsList" :key="item.id" @click="toDetail(item.id)">
                  <div class="goods-img">
                    <van-image lazy-load :src="'http://www.dsl2023hcy.love:3004' + item.goods_img"></van-image>
                  </div>
                  <!-- 商品信息 -->
                  <div class="goods-content">
                    <div class="goods-title">{{ item.goods_name }}</div>

                    <div class="price">
                      ￥<span class="number">{{ dealPrice(item.goods_price)[0] }}</span>
                      <span>.{{ dealPrice(item.goods_price)[1] }}</span>
                      元
                    </div>
                  </div>
                </li>
              </ul>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request/request'
import { Notify } from 'vant'
export default {
  name: 'mall',
  data() {
    return {
      active: 2,
      activeKey: 0,
      goodsList: [],
      page: 1,
      limit: 10,
      oneLevelCateList: [],
      twoLevelCateList: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    // 上拉加载
    onLoad() {
      this.page++
      this.getGoodsByCateId(this.twoLevelCateList[this.active].id)
    },
    // 前往商品详情页
    toDetail(id) {
      this.$router.push('/goods/detail/' + id)
    },
    // 处理价格
    dealPrice(price) {
      const priceArr = price.toFixed(2).split('.')
      return priceArr
    },
    onChange() {
      this.page = 1
      this.goodsList = []
      this.getLevelCateTwo(this.oneLevelCateList[this.activeKey].id)
    },
    tabChangeHandler() {
      this.page = 1
      this.getGoodsByCateId(this.twoLevelCateList[this.active].id)
    },
    // 获取一级分类
    async getLevelCateOne() {
      try {
        const data = await axios.get('/api/user/cate/one')
        if (data.code === 0) {
          this.oneLevelCateList = data.data
          // 获取二级
          this.getLevelCateTwo(this.oneLevelCateList[this.activeKey].id)
        } else {
          Notify({
            type: 'danger',
            message: data.msg
          })
        }
      } catch (err) {
        Notify({ type: 'danger', message: '获取一级分类失败！' })
      }
    },
    // 获取二级分类
    async getLevelCateTwo(id) {
      try {
        const data = await axios.get('/api/user/cate/two', {
          params: {
            id
          }
        })
        if (data.code === 0) {
          this.twoLevelCateList = data.data
          this.active = 0
          if (data.data.length === 0) {
            Notify({
              type: 'warning',
              message: '该分类下暂时商品数据！',
              duration: 800
            })
          } else {
            this.getGoodsByCateId(this.twoLevelCateList[this.active].id)
          }
        } else {
          Notify({
            type: 'danger',
            message: data.msg
          })
        }
      } catch (err) {
        Notify({ type: 'danger', message: '获取二级分类失败！' })
      }
    },
    // 获取所有商品
    async getGoodsByCateId(id) {
      this.$toast.loading({
        message: '加载中...',
        duration: 0
      })
      try {
        const data = await axios.get('/api/user/get/goods/list', {
          params: {
            page: this.page,
            limit: this.limit,
            id: parseInt(id)
          }
        })
        if (data.code === 0) {
          if (this.page === 1) {
            if (data.data.length < this.limit) {
              this.finished = true
            }
            this.goodsList = data.data
          } else {
            this.goodsList = [...this.goodsList, ...data.data]
          }
        }
      } catch (err) {
        Notify({ type: 'danger', message: '获取商品数据失败！' })
      } finally {
        this.$toast.clear()
      }
    }
  },
  created() {
    this.getLevelCateOne()
  }
}
</script>

<style lang="less" scoped>
.mall-container {
  padding-top: 46px;
  padding-bottom: 50px;
  height: 100vh;
  background-color: #f1f1f1;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    z-index: 10;

    .van-icon {
      color: #ee0a24;
      font-weight: 700;
    }
  }
  .sidebar-tabs {
    display: flex;
    ::-webkit-scrollbar {
      display: none;
    }
    .sidebar {
      width: 20%;
      flex-shrink: 0;
      height: 90vh;
      padding-bottom: 4vh;
      overflow-y: auto;
      background-color: #fff;

      ::v-deep .van-sidebar-item__text {
        width: 40px;
      }

      ::v-deep .van-sidebar-item {
        background-color: #fff;
      }
      ::v-deep .van-sidebar-item--select,
      .van-sidebar-item--select:active {
        background-color: #ee0a24;
        color: #fff;
        padding: 12px;
      }
      ::v-deep .van-sidebar-item--select::before {
        width: 2px;
        height: 80%;
      }
      ::v-deep .van-sidebar {
        width: 100%;
      }
    }
    .tabs {
      flex-shrink: 0;
      width: 80vw;
      flex: 4;

      .mall-bg {
        width: 100%;
        padding: 0 10px;
        background-color: #fff;
        img {
          width: 100%;
          height: 10vh;
        }
      }

      ::v-deep .van-sticky--fixed {
        width: 80vw;
      }

      ::v-deep .van-tabs__content {
        max-height: 67vh;
        overflow-y: auto;
      }

      .goods-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 5px;

        .goods-item {
          background-color: #fff;
          padding: 10px;
          width: 48%;
          margin-bottom: 10px;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;

          .goods-img {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
            min-width: 100px;
          }
          .goods-title {
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis; /*显示为......*/
            -webkit-line-clamp: 2; /*显示为两行，在第二行中显示为.......*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .price {
            margin-top: 5px;
            font-size: 12px;
            color: #ee0a24;
            padding-bottom: 10px;
            span {
              font-weight: 700;
            }

            .number {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
